<template>
  <div id="search">
    <el-form ref="form" :inline="true" :model="form" :rules="formRules">
      <!-- 新增查询条件 -->
      <div style="width:1200px">
        <el-form-item
          v-for="(domain, index) in form.domains"
          :key="domain.key">
          <el-form-item :prop="'domains.' + index + '.field'">
            <el-select v-model="domain.field" placeholder="选择搜索名" style="width: 150px" @focus="option">
              <el-option
                v-for="item in logoData"
                :key="item.value"
                :value="item.value"
                :label="item.label"/>
            </el-select>
            <el-form-item :prop="'domains.' + index + '.value'">
              <el-input v-model="domain.value" style="width: 200px" placeholder="请输入搜索值"/>
            </el-form-item>
          </el-form-item>
          <el-form-item :prop="'domains.' + index + '.symbol'">
            <el-select v-model="domain.symbol" placeholder="选择范围" style="width: 150px">
              <el-option label="小于" value="小于"/>
              <el-option label="大于" value="大于"/>
              <el-option label="包含" value="包含"/>
            </el-select>
          </el-form-item>
          <el-form-item v-if="index!==form.domains.length-1" :prop="'domains.' + index + '.op'">
            <el-select v-model="domain.op" placeholder="选择范围" style="width: 150px">
              <el-option label="and" value="and"/>
              <el-option value="or" label="or"/>
            </el-select>
          </el-form-item>
          <el-button v-if="index !== 0" @click.prevent="removeDomain(domain)">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">查询</el-button>
          <el-button @click="addDomain">新增查询条件</el-button>
          <el-button @click.native="resetForm">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Search',
  props: {
    logoData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      optionData: [],
      form: {
        domains: [{
          field: '',
          value: '',
          symbol: '' // 选择搜索范围（大于、小于等）
        }]
      },
      formRules: {
        field: [{ required: true, message: '请选择要搜索的字段名', trigger: 'change' }],
        value: [{ required: true, message: '请输入你要搜索的值', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 保存当前表单数据
    submitForm: function() {
      this.$emit('transfer', this.form.domains)
    },
    option() {
      this.$emit('transferOption')
    },
    // 重置输入框内的所有数据
    resetForm: function() {
      this.$refs['form'].resetFields()
    },
    // 删除新增自定义字段
    removeDomain(item) {
      var index = this.form.domains.indexOf(item)
      if (index !== -1) {
        this.form.domains.splice(index, 1)
      }
      // 如果删除到最后一个的话初始化domains
      if (this.form.domains.length === 1) {
        this.form.domains = [{
          field: this.form.domains[0].field,
          value: this.form.domains[0].value,
          symbol: this.form.domains[0].symbol // 选择搜索范围（大于、小于等）
        }]
      }
    },
    // 新增自义定字段
    addDomain() {
      this.form.domains.push({
        value: '',
        field: ''
      })
    }
  }
}
</script>

<style scoped>
</style>
